import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import { Bar, DoubleBar, FacetBar } from '@/components/Charts';
import PanelTitle from '@/components/PanelTitle';
import { formatAxis } from '@/utils/sysFun';
import styles from './index.less';

@connect(({ commonModel }) => ({ commonModel }))
class BarDemo extends Component {
  componentDidMount() {
    this.fetch();
  }

  fetch = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'commonModel/query',
      targetKey: 'barData',
      payload: {},
    });
  };

  render() {
    const {
      commonModel: {
        barData: {
          singleBarData,
          groupBarData,
          groupBarData2,
          stackBarData,
          expandBarData,
          doubleBarData,
          doubleBarCustomData,
          doubleBarExpandData,
          plusMinusBarData,
          facetBarData,
        } = {},
      },
    } = this.props;
    return (
      <Row className={styles.chartRow}>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="单条数据" />
            <Bar
              height={200}
              data={singleBarData}
              showValue
              showTooltip={false}
              onChartClick={param => console.log(param)}
              chartUnitPosition
              unit="元"
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="正负数据" />
            <Bar
              height={200}
              data={formatAxis(plusMinusBarData, 'month')}
              groupField="group"
              showTooltipTitle={false}
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="分组" />
            <Bar height={200} data={groupBarData} groupField="group" />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="分组2" />
            <Bar
              height={200}
              data={groupBarData2}
              unit="万元"
              chartUnitPosition
              groupField="group"
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartDarkPanel}>
            <PanelTitle title="分组-dark" fontColor="#1f9dff" />
            <Bar
              height={200}
              data={groupBarData2}
              unit="万元"
              chartUnitPosition
              groupField="group"
              theme="dark"
              showValue
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="分组2" />
            <Bar
              height={200}
              data={groupBarData}
              groupField="group"
              verticalLegend
              unit="%"
              showYUnit
              showTooltipUnit
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="层叠" />
            <Bar
              height={200}
              data={stackBarData}
              groupField="group"
              adjust={[{ type: 'stack' }]}
              shape="rect"
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="字段展开" />
            <Bar
              height={200}
              data={expandBarData}
              groupField="group"
              fieldExpand={[
                { field: 'y1', rename: '西药费用' },
                { field: 'y2', rename: '中草药费用' },
                { field: 'y3', rename: '中成药费用' },
              ]}
              x="orgName"
              unit="元"
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="双轴-字段展开" />
            <DoubleBar
              height={200}
              data={doubleBarExpandData}
              groupField="group"
              fieldExpand={[
                { field: 'subCost', rename: '总计' },
                { field: 'increase', rename: '数量' },
              ]}
              yLeftParams={{
                unit: '元',
              }}
              yRightParams={{
                unit: '%',
              }}
              chartUnitPosition
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartDarkPanel}>
            <PanelTitle title="双轴-字段展开-dark" fontColor="#1f9dff" />
            <DoubleBar
              height={200}
              data={doubleBarExpandData}
              groupField="group"
              fieldExpand={[
                { field: 'subCost', rename: '总计' },
                { field: 'increase', rename: '数量' },
              ]}
              yLeftParams={{
                unit: '元',
              }}
              yRightParams={{
                unit: '%',
              }}
              theme="dark"
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="双轴-默认字段名" />
            <DoubleBar
              height={200}
              data={doubleBarData}
              groupField="group"
              yLeftParams={{
                unit: '元',
              }}
              yRightParams={{
                unit: '%',
              }}
              chartUnitPosition
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="双轴-自定义字段名" />
            <DoubleBar
              height={200}
              data={doubleBarCustomData}
              showValue
              groupField="type"
              yLeftParams={{
                y: 'text',
                unit: '元',
              }}
              yRightParams={{
                y: 'value',
                unit: '%',
              }}
            />
          </div>
        </Col>
        <Col span={24}>
          <div className={styles.chartPanel}>
            <PanelTitle title="分面" />
            <FacetBar
              height={200}
              data={facetBarData}
              hiddenXLabel
              groupField="x"
              facetPadding={[
                30 * window.viewportScale,
                20 * window.viewportScale,
                20 * window.viewportScale,
              ]}
              fields={['name']}
              showTitle
              cols={facetBarData && facetBarData.length / 2}
            />
          </div>
        </Col>
        <Col span={24}>
          <div className={styles.chartDarkPanel}>
            <PanelTitle title="分面" fontColor="#1f9dff" />
            <FacetBar
              height={200}
              data={facetBarData}
              hiddenXLabel
              groupField="x"
              facetPadding={[
                30 * window.viewportScale,
                20 * window.viewportScale,
                20 * window.viewportScale,
              ]}
              fields={['name']}
              showTitle
              cols={facetBarData && facetBarData.length / 2}
              theme="dark"
            />
          </div>
        </Col>
      </Row>
    );
  }
}

export default BarDemo;
